<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>靓仔们管书-图书管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/static/css/index.css" media="all">
    <style>

    </style>
</head>
<body>

<div class="layuimini-main">

    <!--    导航栏-->
    <div class="layui-row">
        <div class="layui-col-md9">
            <!--    导航栏-->
            <ul class="layui-nav" style="border-radius: 0;background-color: rgb(84, 86, 82)" lay-filter="">
                <li class="layui-nav-item layui-this"><a href="/">图书</a></li>
            </ul>
            <!--    导航栏-->
        </div>
        <div class="layui-col-md3">
            <!--    导航栏  登录之后的-->
            <ul th:if="${session.login != null}" class="layui-nav" lay-filter="nav"
                style="border-radius: 0;background-color: rgb(84, 86, 82);">
                <li class="layui-nav-item">
                    <a href="javascript:void(0)" onclick="clickBorrowHistory()">借阅记录
                        <i class="layui-icon layui-icon-read"></i>
                    </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" th:text="${session.login.account}">靓仔</a>
                    <dd class="layui-nav-child">
                        <a href="/logout" class="login-out">退出登录</a>
                    </dd>
                </li>
            </ul>
            <!--    导航栏  登录之后的-->

            <!--    导航栏  登录之前的-->
            <ul th:if="${session.login == null}" class="layui-nav"
                style="border-radius: 0;background-color: rgb(84, 86, 82)">
                <li class="layui-nav-item">
                    <a href="/register.html">注册</a>
                </li>
                <li class="layui-nav-item">
                    <button type="button" onclick="loginBtn()"
                            class="layui-btn layui-btn layui-btn-normal"
                            style="margin: 0px 5px">用户登录
                    </button>
                </li>
            </ul>
            <!--    导航栏  登录之前的-->


        </div>
    </div>
    <!--    导航栏-->

    <!--    搜索-->
    <div class="layui-row search-box">
        <img class="logo" src="/static/images/logo.png" alt="">
        <div class="search-content">
            <input type="text" name="title" id="search" required lay-verify="required" placeholder="搜索书籍"
                   autocomplete="off"
                   class="layui-input">
            <button type="button" onclick="search()" class="layui-btn layui-btn-normal">搜索</button>
        </div>
    </div>
    <!--    搜索-->


    <!--    主体内容-->
    <div class="layui-row" style="padding: 20px">
        <div class="layui-col-md8 left-box">

            <!--        分类选择    -->
            <div class="category-list" id="categoryList">

            </div>
            <!--        分类选择    -->

            <!--            图书列表-->
            <div class="layui-panel">
                <div class="book-list">

                    <!--                    图书-->
                    <div class="book-item" th:each="book : ${page.content}">
                        <div class="book-cover">
                            <img
                                    th:src="${book.cover}"
                                    src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto"
                                    alt="">
                        </div>
                        <div th:onclick="'javascript:clickBook('+${book.bookId}+')'" class="book-info">
                            <h3 class="boo-name"><span th:text="${book.name}">xxxxxxx</span></h3>
                            <p class="info"> [[${book.author}]] / [[${book.pubTime}]] / [[${book.publisher}]] </p>
                            <p class="desc" th:text="${book.description}"></p>
                        </div>
                    </div>
                    <!--                    图书-->


                </div>

                <!--                分页-->
                <div style="text-align: center">
                    <div id="page"></div>
                </div>
                <!--                分页-->

            </div>
            <!--            图书列表-->

        </div>
        <div class="layui-col-md4">
            <h3>靓仔推荐</h3>
            <div class="recommend-book-list">
                <div class="book-item">
                    <div class="book-cover">
                        <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
                    </div>
                    <p class="book-name">名字</p>
                </div>
                <div class="book-item">
                    <div class="book-cover">
                        <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
                    </div>
                    <p class="book-name">名字</p>
                </div>
                <div class="book-item">
                    <div class="book-cover">
                        <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
                    </div>
                    <p class="book-name">名字</p>
                </div>
                <div class="book-item">
                    <div class="book-cover">
                        <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
                    </div>
                    <p class="book-name">名字</p>
                </div>
                <div class="book-item">
                    <div class="book-cover">
                        <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
                    </div>
                    <p class="book-name">名字</p>
                </div>
                <div class="book-item">
                    <div class="book-cover">
                        <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
                    </div>
                    <p class="book-name">名字</p>
                </div>
            </div>
        </div>
    </div>
    <!--    主体内容-->


    <!--    书籍详情-->
    <div id="layer_notice" style="display: none">
        <div class="book-base-info">
            <div class="book-cover">
                <img src="https://img1.baidu.com/it/u=1930696192,795775478&fm=26&fmt=auto" alt="">
            </div>
            <div class="book-info">
                <div class="book-name">书名</div>
                <div class="book-author">作者</div>
                <div class="book-publisher">出版社</div>
                <div class="book-pub-time">出版日期</div>
            </div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">馆藏位置</li>
                <li>内容简介</li>
                <li>作者简介</li>
            </ul>
            <div class="layui-tab-content" style="height: 100px;">
                <!--                位置信息-->
                <div class="layui-tab-item layui-show">
                    <div class="local-box">6楼46行A面3架</div>
                    <div class="real-book-list">
                        <div class="real-book-item">
                            <span>1</span>
                            <span>2021.08.23 应还</span>
                        </div>
                        <div class="real-book-item">
                            <span>1</span>
                            <button type="button" class="layui-btn layui-btn-xs">点击借阅</button>
                        </div>
                        <div class="real-book-item">
                            <span>1</span>
                            <span>2021.08.23 应还</span>
                        </div>
                        <div class="real-book-item">
                            <span>1</span>
                            <span>2021.08.23 应还</span>
                        </div>
                        <div class="real-book-item">
                            <span>1</span>
                            <span>2021.08.23 应还</span>
                        </div>
                    </div>
                </div>
                <!--                位置信息-->

                <!--                内容简介-->
                <div class="layui-tab-item">
                    <div style="padding-left: 5px;font-weight: 700;margin-bottom: 5px">内容简介</div>
                    <p class="book-desc">
                        300年历史的长时段剖析
                        人工智能时代打工人的启示录
                        AI 革命，革的是谁的命？
                        ★ 英国《金融时报》2019年度最佳书籍
                        ★ 芝加哥大学推荐必读书目
                        ★ 北京大学光华管理学院教授刘学、中国人民大学经济学院教授高德步、青年社会学家廉思重磅推荐
                        ◎ 内容简介
                        每一次重大的技术变革，都会给社会的主要工作形态带来深刻的影响。
                        本书系统而全面地回顾了近几百年技术进步的历史，以及它如何从根本上改变了社会成员之间的经济和政治权力分配。
                        本书作者将带领读者们遍览各个时代技术进步对人们工作形态的影响，揭示不同时代“打工人”的处境，并最终将目光转向未来，试图分析当前的AI革命将对我们的工作造成何种影响，以及我们该如何做出应对。作者力图说明，技术进步对收入造成何种影响，将决定人们对它的态度。
                        工业革命是历史上的重大时刻，但当时几乎没有人意识到它的巨大后果。
                        正如本书所表...
                    </p>
                </div>
                <!--                内容简介-->

                <!--                作者简介-->
                <div class="layui-tab-item">
                    <div style="padding-left: 5px;font-weight: 700;margin-bottom: 10px">作者简介</div>
                    <div class="author-name">
                        卡尔·贝内迪克特·弗雷
                    </div>
                    <p class="author-desc">
                        卡尔·贝内迪克特·弗雷（Carl Benedikt Frey），牛津马丁花旗会士，牛津新经济思维研究所高级研究员。
                        在牛津大学马丁学院主持有关工作之前景的项目。他是一位知名的经济学家和经济史学家，
                        同时担任二十国集团、经合组织、联合国、欧盟以及多家大企业的顾问。
                    </p>
                </div>
                <!--                作者简介-->

            </div>
        </div>
    </div>
    <!--    书籍详情-->


    <!--    借阅记录-->
    <div id="borrow-history" class="borrow-history" style="display: none">
        <ul class="layui-timeline">

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #FF5722">未还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis"></i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">2018年xx年xx日 借书《xxxxx》 <span style="color: #5FB878">已还</span></div>
                </div>
            </li>

        </ul>
    </div>

    <!--    借阅记录-->


    <!--    登录表单-->
    <div id="login-form" style="display: none">
        <form class="layui-form form-box" action="">

            <div class="layui-form-item" style="margin-top: 20px">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-inline">
                    <input type="text" id="account" value="12345678910" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请输入账号</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="password" id="password" value="123456" lay-verify="pass" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">请输入密码</div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">验证码</label>
                <div class="layui-input-inline">
                    <input type="text" id="code" style="width: 80px;display: inline-block" autocomplete="off"
                           class="layui-input">
                    <img id="refreshCaptcha" class="validateImg" onclick="changeyanz();"
                         src="">
                </div>
            </div>

            <div class="layui-form-item" style="margin-top: 35px">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" onclick="login()">登录</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>

    </div>
    <!--    登录表单-->


</div>

<script src="/static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/static/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/static/js/generate.js" charset="utf-8"></script>
<script>
    let $$ = null
    layui.use(['layer', 'element', 'laypage'], function () {
        let layer = layui.layer,
            element = layui.element,
            $ = $$ = layui.jquery,
            laypage = layui.laypage;


        // 类型
        $$.ajax({
            type: "get",
            url: "/common/type",
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                let category = getQueryString("category")
                let categories = data.data
                let categoryHtml = ""
                if (category == 0 || category == null) {
                    categoryHtml = `<span class="category-item active" onclick="clickCategory(0,0)">全部</span>`;
                } else {
                    categoryHtml = `<span class="category-item" onclick="clickCategory(0,0)">全部</span>`;
                }

                for (let i = 0; i < categories.length; i++) {
                    let c = categories[i]
                    if (category == c.categoryId) {
                        categoryHtml += `<span class="category-item active" onclick="clickCategory(${i + 1},${c.categoryId})">${c.name}</span>`
                    } else {
                        categoryHtml += `<span class="category-item" onclick="clickCategory(${i + 1},${c.categoryId})">${c.name}</span>`
                    }

                }
                document.getElementById("categoryList").innerHTML = categoryHtml
            }
        });

        let current = getQueryString("current")
        if (current == null) {
            current = 1
        }

        let name = getQueryString("name")
        if (name != null && name != "") {
            $$("#search").val(name)
        }


        // 分页
        laypage.render({
            elem: 'page',
            limit: 5,
            curr: current,
            count: [[${page.totalElement}]],//数据总数，从服务端得到
            jump: function (obj, first) {
                let category = getQueryString("category")
                let search = $$("#search").val().trim()
                //首次不执行
                if (!first) {
                    if (search != null && search != "") {
                        location.href = `/index?pageSize=${obj.limit}&current=${obj.curr}&name=${search}`;
                    } else {
                        location.href = `/index?category=${category}&pageSize=${obj.limit}&current=${obj.curr}`;
                    }

                }
            }
        });


    });


    function search() {
        let search = $$("#search").val().trim()
        if (search != null && search != "") {
            location.href = `/index?name=${search}`;
        } else {
            layer.msg("请输入搜索内容", {icon: 5});
        }

    }

    function clickCategory(index, categoryId) {
        $$(".category-item").removeClass("active")
        $$(".category-item").eq(index).addClass("active")
        location.href = "/index?category=" + categoryId;

    }

    function clickBook(bookId) {

        let that = this;
        $$.ajax({
            type: "get",
            url: "/common/book/" + bookId,
            contentType: "application/json;charset=UTF-8",
            success: function (res) {
                if (res.code === 200) {
                    //多窗口模式，层叠置顶
                    layer.open({
                        type: 1,
                        title: 'xxxxx',
                        area: ['500px', '400px'],
                        shade: 0,
                        content: getBookHtml(res.data, $$),
                        zIndex: layer.zIndex,
                        success: function (layero, index) {

                        },
                    });
                } else {
                    layer.msg(res.msg, {icon: 5});
                }
            }
        });


    }


    function loginBtn() {
        /**
         * 获取验证码
         */
        changeyanz()
        layer.open({
            type: 1,
            shade: false,
            title: false, //不显示标题
            content: $$('#login-form')
        });
    }

    function login() {
        let account = $$("#account").val().trim()
        let password = $$("#password").val().trim()
        let code = $$("#code").val().trim()
        if (account === "") {
            layer.msg("请输入账号", {icon: 5});
            return
        }
        if (password === "") {
            layer.msg("请输入密码", {icon: 5});
            return
        }
        if (code === "") {
            layer.msg("请输入验证码", {icon: 5});
            return
        }

        $$.ajax({
            type: "post",
            url: "/login",
            dataType: "json",
            data: JSON.stringify({account, password, code, admin: false}),
            contentType: "application/json;charset=UTF-8",
            success: function (data) {
                if (data.code === 200) {
                    layer.msg('登录成功', {icon: 1});
                    setTimeout(() => {
                        location.reload();
                    }, 1000)
                } else {a
                    layer.msg(data.msg, {icon: 5});
                }
            }
        });

    }

    function changeyanz() {
        $$("#refreshCaptcha").attr("src", "/common/captchaImage?d=" + new Date().getTime());
    }

    function clickBorrowHistory() {
        $$.ajax({
            type: "get",
            url: "/user/history",
            contentType: "application/json;charset=UTF-8",
            success: function (res) {
                if (res.code == 200) {
                    let borrows = res.data

                    if (borrows.length == 0) {
                        layer.msg("暂无借阅记录", {icon: 2});
                        return
                    }


                    let strs = ""

                    for (let i = 0; i < borrows.length; i++) {
                        let b = borrows[i]
                        let str = ""
                        if (b.borrow) {
                            str =
                                `
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">${b.borTime} 借书《${b.bookName}》 <span style="color: #FF5722">未还</span></div>
                                    </div>
                                </li>
                            `
                        } else {
                            str =
                                `
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis"></i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">${b.borTime} 借书《${b.bookName}》 <span style="color: #5FB878">已还</span></div>
                                    </div>
                                </li>
                            `
                        }

                        strs += str
                    }

                    let html =
                        `
                            <div id="borrow-history" class="borrow-history">
                                <ul class="layui-timeline">${strs}</ul>
                            </div>
                        `

                    layer.open({
                        type: 1,
                        shade: false,
                        title: false, //不显示标题
                        content: html
                    });

                } else {
                    layer.msg(res.msg, {icon: 5});

                }

            }
        });

    }


    /**
     * 获取地址栏参数
     * @param name
     * @returns {string|null}
     * @constructor
     */
    function getQueryString(key) {
        // 获取参数
        let url = window.location.search;
        // 正则筛选地址栏
        let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
        // 匹配目标参数
        let result = url.substr(1).match(reg);
        //返回参数值
        return result ? decodeURIComponent(result[2]) : null;
    }

</script>
</body>
</html>
